<template>
  <!--线上课程-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <Row :gutter="16">
        <i-col span="6">
          <ngn :data="data1" :activeIndex="activeIndex"></ngn>
        </i-col>
        <i-col span="18">
          <div class="com">
            <p class="p">
              <Icon type="ios-pin"/>
              <span>您现在的位置是:</span><span class="span">{{data1.title}}</span><span> > </span><span
              class="span">线上课程</span>
            </p>
          </div>
          <div v-if="videoData" class="video">
            <video style="width:100%;height: 100%" controls>
              <source :src="videoData.uri" type="video/mp4">
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'
  import ngn from '../module/ngn'

  export default {
    components: {
      carousel, ngn,
    },
    data() {
      return {
        activeIndex: 2,
        autoplaySpeed: 100000,
        onlineCoursesLink: this.$api.url,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        data1: {
          title: '编辑之家',
          list: [
            {list: '编辑活动', link: 'editingActivity'},
            {list: '文章资讯', link: 'actciles'},
            {list: '线上课程', link: 'onlineCourses2'},
            {list: '政策法规', link: 'policiesRegulations'},
            {list: '特别策划', link: 'SpecialPlanning'},
          ],
        },
        id: '',
        videoData: '',
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.dataArray()
    },
    methods: {
      dataArray() {
        this.$axios.get(this.onlineCoursesLink + '/online/classes/selectOCDetails/' + this.id).then((res) => {
          this.videoData = res.data.data
        });
      },
    },
  }
</script>

<style scoped>
  .com {
    padding-bottom: 20px;
  }

  .com .p {
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #000;
  }

  .span {
    padding: 0 10px;
  }

  .video {
    border: 1px solid #000;
    height: 500px;
    width: 100%;
    margin-bottom: 20px;
  }
</style>
